/*
 * @Author: wangtao
 * @Date: 2020-09-08 16:51:16
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-08 14:06:13
 * @Description: 车牌键盘
 */
import React from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  Modal,
} from 'react-native';
import {
  iconCloseCoffee,
  iconDeleteSquareGray,
  iconSwitchCoffee,
} from '@/images';

import {
  screenHeight,
  px2dp,
  fontColorSecDeepGray,
  screenWidth,
  mainBgColorWhite,
} from '@/styles';

let vehicleProvince = [
  '京',
  '津',
  '晋',
  '冀',
  '蒙',
  '辽',
  '吉',
  '黑',
  '沪',
  '苏',
  '浙',
  '皖',
  '闽',
  '赣',
  '鲁',
  '豫',
  '鄂',
  '湘',
  '粤',
  '桂',
  '琼',
  '渝',
  '川',
  '贵',
  '云',
  '藏',
  '陕',
  '甘',
  '青',
  '宁',
  '新',
];

let vehicleNum = [
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '0',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
  '挂',
];

export default class XMVehicleKeyBord extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKeyBord: 1,
      isVisible: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    const { isVisible } = nextProps;
    this.setState({ isVisible });
  }

  render() {
    const { activeKeyBord, isVisible } = this.state;
    const { onKeyDown, onKeyDelete } = this.props;
    if (!isVisible) {
      return null;
    }

    let keyBordCells;
    if (activeKeyBord == 1) {
      keyBordCells = vehicleProvince;
    }
    if (activeKeyBord == 2) {
      keyBordCells = vehicleNum;
    }
    return (
      <Modal animationType='slide' transparent visible>
        <TouchableOpacity
          style={styles.container}
          activeOpacity={1}
          onPress={() => {
            this.onClose();
          }}
        />
        <View style={[styles.containerWrap]}>
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.headerLeft}
              activeOpacity={0.8}
              onPress={() => {
                if (activeKeyBord == 1) {
                  this.setState({ activeKeyBord: 2 });
                }
                if (activeKeyBord == 2) {
                  this.setState({ activeKeyBord: 1 });
                }
              }}
            >
              <Image
                source={iconSwitchCoffee}
                resizeMode='stretch'
                style={styles.switchImg}
              />
              <Text style={styles.switchText}>切换键盘</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.headerRight}
              activeOpacity={0.8}
              onPress={() => {
                this.onClose();
              }}
            >
              <Image
                source={iconCloseCoffee}
                resizeMode='stretch'
                style={styles.switchImg}
              />
              <Text style={styles.switchText}>关闭</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.keyBordWrap}>
            {keyBordCells.map((item) => {
              return (
                <TouchableOpacity
                  style={[
                    styles.keyBordCell,
                    activeKeyBord == 2 && { width: px2dp(66) },
                  ]}
                  activeOpacity={0.8}
                  onPress={() => {
                    onKeyDown(item);
                    // 如果输入车牌号，输入省后自动切换普通键盘
                    if (activeKeyBord == 1) {
                      this.setState({ activeKeyBord: 2 });
                    }
                  }}
                >
                  <Text>{item}</Text>
                </TouchableOpacity>
              );
            })}
            <TouchableOpacity
              style={[
                styles.keyBordCell,
                activeKeyBord == 2 && { width: px2dp(66) },
              ]}
              activeOpacity={0.8}
              onPress={() => { onKeyDelete(); }}
            >
              <Image
                source={iconDeleteSquareGray}
                style={styles.delImg}
                resizeMode='stretch'
              />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }

  onClose=() => {
    this.setState({ isVisible: false });
    this.props.onClose && this.props.onClose();
  }
}

const styles = StyleSheet.create({
  container: {
    width: screenWidth,
    height: screenHeight,
    zIndex: 10,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
  },
  containerWrap: {
    width: screenWidth,
    zIndex: 10,
    position: 'absolute',
    bottom: 0
  },
  header: {
    width: screenWidth,
    height: px2dp(72),
    backgroundColor: mainBgColorWhite,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
  },
  headerLeft: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  switchImg: {
    width: px2dp(20),
    height: px2dp(20),
  },
  switchText: {
    fontSize: px2dp(24),
    color: fontColorSecDeepGray,
    marginLeft: px2dp(4),
  },
  headerRight: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  keyBordWrap: {
    width: screenWidth,
    height: px2dp(500),
    backgroundColor: '#E1E3E7',
    paddingHorizontal: px2dp(10),
    paddingTop: px2dp(32),
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  keyBordCell: {
    width: px2dp(74),
    height: px2dp(90),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(8),
    marginBottom: px2dp(12),
    marginLeft: px2dp(6),
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 1,
    shadowColor: 'black', //  阴影颜色
    shadowOffset: { width: 0, height: 0 }, // 阴影偏移
    shadowOpacity: 0.6, // 阴影不透明度
    shadowRadius: 6, //  圆角
  },
  delImg: {
    width: px2dp(42),
    height: px2dp(42),
  },
});
